import {
  Form,
  Input,
  Button
} from 'antd';
import md5 from 'md5';
import React from 'react';
import { connect } from '@/dva';
import { Commit } from '@/dva/types';
import styles from './styles.moudle.scss';

interface Props {
  user: any;
  commit: Commit;
}

@connect({
  user: (state) => state.user
})
class Login extends React.PureComponent<Props> {

  private onSubmit = (form: any) => {
    const { password } = form;

    const payload: any = {
      ...form, password: md5(password)
    }

    this.props.commit('user/login', payload);
  }

  get user() {
    return this.props?.user || {};
  }

  render() {
    const { loading } = this.user;

    return (
      <div className={styles.container}>
        <Form
          size="large"
          onFinish={this.onSubmit}
          className={styles.login_form}
        >
          <p className={styles.title}>
            用户登录
          </p>
          <Form.Item
            name="userName"
            rules={[{
              required: true,
              message: '请输入用户名'
            }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{
              required: true,
              message: '请输入密码'
            }]}
          >
            <Input placeholder="密码" type="password"/>
          </Form.Item>
          <Form.Item>
            <Button
              block={true}
              type="primary"
              loading={loading}
              htmlType="submit"
              children={loading ? '登录中' : '登录'}
            />
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default Login;
